<section id="bill-detail">
	<hl-page-header title="应收账款-收款详情"></hl-page-header>
	<div class="js-failMemo" style="margin: 0 ;" v-if="billData.failMemo && billData.billState == 'BRJ'">{{billData.failMemo}}</div>
	<div class="bill-boxshadow">
		<div class="bill-due-to"><b class="icon-GM-bill"></b><span class="color-orange">账期 {{billData.beginDate | timestamp}}
				至 {{billData.endDate | timestamp}}</span>
				<span class="change-abs" v-if="billData.contractAlterFlag == 'Y'">变更中</span>
				<div class="inline ml-5 relative init-hover" v-if="billData.contractAlterFlag == 'Y'">
					<span class="icon-Gm-explain cursor color-999"></span>
					<div class="init-tips color-999">合同变更中的账单将冻结所有相关操作，直到变更完结或作废。</div>
				</div>
		</div>
	</div>
	<div class="bill-contract-content">
		<div class="clearfix">
			<h1 class="pull-left font-16" style="margin:0;line-height:34px;"><strong>结算信息</strong></h1>
			<hl-button size="mini" v-if=" (billData.billState == 'WTJ' || billData.billState == 'BRJ') && !isEditCountMes && billData.contractAlterFlag == 'N'" class="pull-right" @on-click="editCountMes">编辑</hl-button>
			<hl-button size="mini" v-if=" (billData.billState == 'WTJ' || billData.billState == 'BRJ') && isEditCountMes" class="pull-right" @on-click="saveCountMes">保存</hl-button>
		</div>


		<div class="dy-flex">
			<div class="dy-fx-1">账单编号：<span class="ml-24">{{billData.no}}</div>
			<div class="dy-fx-1">账单类型：<span class="ml-24">{{billData.billTypeName || '--'}}</div>
			<div class="dy-fx-1"></div>
		</div>

		<div class="dy-flex" v-if=" billData.billTypeCode == 'C' || billData.billTypeCode == 'T' ">
			<div class="dy-fx-1">管理编号：<a :href="'#/contractNewDeatil?id='+idA.idb+'&ddtab=true'" class="ml-24">{{contractData.mCode}}</a></div>
			<div class="dy-fx-1">合同编号：<a :href="'#/contractNewDeatil?id='+idA.idb+'&ddtab=true'" class="ml-24">{{contractData.cCode}}</a></div>
			<div class="dy-fx-1">合同名称：<span class="ml-24">{{contractData.contractName ? contractData.contractName : '--'}}</span></div>
		</div>

		<div class="dy-flex" v-if=" billData.billTypeCode == 'YX' ||  billData.billTypeCode == 'YXTK' ">
			<div class="dy-fx-1">意向编号：<span class="ml-24">{{billData.intentCode}}</div>
		</div>
		<div class="dy-flex" v-if=" billData.billTypeCode == 'T' ">
			<div class="dy-fx-1">退租编号：<span class="ml-24">{{billData.withdrawCode}}</div>
		</div>

		<div class="bill-customer">客户：<span class="ml-24">{{zlfCompanySpecial || '--'}}</span></div>
		<div class="bill-as-of-date" v-if="!isEditCountMes">收款截止日：<span class="ml-24">{{billData.deadlineDate | timestamp}}</span></div>

		<div class="dy-flex line-height-34 mt-5 receiptDeadlineDate" v-if=" billData.billState == 'WTJ' && isEditCountMes">
			<div class="fl">收款截止日:</div>
			<div class="fl ml-24">
				<div style="width: 150px;">
					<web-calendar v-model="receiptDeadlineDate" @change="receiptDeadlineDateChange"></web-calendar>
				</div>
			</div>
		</div>

		<div class="bill-state">状态：
			<span class="ml-24 color-orange">
				<b>{{billData.paymentState | billState}}</b>
				<b class="ml-10 mr-10">{{billData.overdueState | billState}}</b>
				<b>{{billData.billState | billState}}</b>
			</span>
		</div>

	</div>
	<!-- 出租资源 -->
	<div class="rent-resource">
		<h3 class="font-16">出租资源</h3>
		<!-- 单元 -->
		<div v-if="building.length">
			<div class="clearfix line-height-34">
				<div class="pull-left">单元<span>({{Number(totalArea).toFixed(2)}}m²)</span></div>
				<div class="pull-right cursor" @click="checkDetailMes('unit')">
					<span style="color:#337ab7" v-if="!unitOpenFlag">展开详情</span>
					<span style="color:#337ab7" v-if="unitOpenFlag">收起详情</span>
					<img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!unitOpenFlag">
					<img class="bill-open-image" src="assets/images/down.png" alt="" v-if="unitOpenFlag">
				</div>
			</div>
			<div class="unit-table" v-if="unitOpenFlag">
				<div class="tb-title dy-flex border-b gradient-color">
					<div class="dy-fx-2">项目</div>
					<div class="dy-fx-2">楼栋</div>
					<div class="dy-fx-1">楼层</div>
					<div class="dy-fx-4">单元</div>
				</div>
				<div class="tb-content">
					<ul class="dy-flex project-cr">
						<li class="dy-fx-2 project">{{contractData.projectName}}</li>
						<li class="dy-fx-7">
							<!-- 楼栋 -->
							<ul class="dy-flex building-cr" v-for="(item,index) in building">
								<li class="dy-fx-2 building">{{item.buildingName}}</li>
								<li class="dy-fx-5">
									<!-- 楼层 -->
									<ul class="dy-flex floor-cr" v-for="(item1,index1) in item.floor">
										<li class="dy-fx-1 floor">{{item1.floorName || '--'}}</li>
										<li class="dy-fx-4 unit">
											<!-- 单元 -->
											<b v-for="(item2,index2) in item1.unit" style="float:left">{{item2}}<i v-if="index2 + 1 !== item1.unit.length">、</i></b>
										</li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 工位 -->
		<div v-if="wp.length">
			<div class="clearfix line-height-34">
				<div class="pull-left">工位<span>({{wpTotalNum}}个)</span></div>
				<div class="pull-right cursor" @click="checkDetailMes('wp')">
					<span style="color:#337ab7" v-if="!wpOpenFlag">展开详情</span>
					<span style="color:#337ab7" v-if="wpOpenFlag">收起详情</span>
					<img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!wpOpenFlag">
					<img class="bill-open-image" src="assets/images/down.png" alt="" v-if="wpOpenFlag">
				</div>
			</div>
			<div class="position-table border" v-if="wpOpenFlag">
				<div class="tb-title dy-flex border-b gradient-color">
					<div class="dy-fx-3">项目</div>
					<div class="dy-fx-3">楼栋</div>
					<div class="dy-fx-1">楼层</div>
					<div class="dy-fx-1">单元</div>
					<div class="dy-fx-1">工位数</div>
					<div class="position-item">工位</div>
				</div>
				<ul class="tb-content line-height-40">
					<li class="content-item dy-flex" v-for="(item,index) in wp" :buildingId="item.buildingId" :floorId="item.floorId"
					 :unitId="item.unitId">
						<div class="dy-fx-3">{{contractData.projectName}}</div>
						<div class="dy-fx-3">{{item.buildingName}}</div>
						<div class="dy-fx-1">{{item.floorName || '--'}}</div>
						<div class="dy-fx-1">{{item.unitName}}</div>
						<div class="dy-fx-1">{{item.positions.length}}</div>
						<div class="position-item">
							<span class="position">
								<b v-for="(item1,index1) in item.positions" style="float:left">{{item1.positionName}}<i v-if="index1 + 1 !== item.positions.length">、</i></b>
							</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<!-- 车位 -->
		<div v-if="st.length">
			<div class="clearfix line-height-34">
				<div class="pull-left">车位<span>({{stTotalNum}}个)</span></div>
				<div class="pull-right cursor" @click="checkDetailMes('st')">
					<span style="color:#337ab7" v-if="!stOpenFlag">展开详情</span>
					<span style="color:#337ab7" v-if="stOpenFlag">收起详情</span>
					<img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!stOpenFlag">
					<img class="bill-open-image" src="assets/images/down.png" alt="" v-if="stOpenFlag">
				</div>
			</div>
			<div class="position-table border" v-if="stOpenFlag">
				<div class="tb-title dy-flex border-b gradient-color">
					<div class="dy-fx-3">项目</div>
					<div class="dy-fx-3">楼栋</div>
					<div class="dy-fx-1">楼层</div>
					<div class="dy-fx-1">单元</div>
					<div class="dy-fx-1">车位数</div>
					<div class="position-item">车位</div>
				</div>
				<ul class="tb-content">
					<li class="content-item dy-flex" v-for="(item,index) in st" :buildingId="item.buildingId" :floorId="item.floorId"
					 :unitId="item.unitId">
						<div class="dy-fx-3">{{contractData.projectName}}</div>
						<div class="dy-fx-3">{{item.buildingName}}</div>
						<div class="dy-fx-1">{{item.floorName || '--'}}</div>
						<div class="dy-fx-1">{{item.unitName}}</div>
						<div class="dy-fx-1">{{item.positions.length}}</div>
						<div class="position-item">
							<span class="position">
								<b v-for="(item1,index1) in item.positions" style="float:left">{{item1.positionName}}<i v-if="index1 + 1 !== item.positions.length">、</i></b>
							</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<!-- 已收款信息 -->
	<div class="gathering border-t" v-if="billData.transactions.length > 0">
		<h3 class="font-16">已收款信息</h3>
		<div class="border-r box-i-shadow br-4 overflow">
			<div class="dy-flex list-head">
				<div class="dy-fx-1"></div>
				<div class="dy-fx-2">收款时间</div>
				<div class="dy-fx-2">支付时间</div>
				<div class="dy-fx-2">收款金额(元)</div>
				<div class="dy-fx-2">滞纳金</div>
				<div class="dy-fx-2">收款渠道</div>
				<div class="dy-fx-2">收款人</div>
				<div class="dy-fx-2">状态</div>
				<div class="dy-fx-2">说明</div>
				<div class="dy-fx-2">支付凭证</div>
				<div class="dy-fx-2">操作</div>
			</div>
			<div class="dy-flex list-head br-t-n" v-for="(item, index) in billData.transactions">
				<div class="dy-fx-1">
					<span v-if="item.wstate === 'FFP'" class="color-999">-</span>
					<span :class="{'gathering-select':true, 'g-active':item.flag}" v-else @click="showPlFp(index, item.id, item.flag)"></span>
				</div>
				<div class="dy-fx-2">{{item.createTime | timestamp}}</div>
				<div class="dy-fx-2">{{item.paymentTime | timestamp}}</div>
				<div class="dy-fx-2">{{item.amountTPay | toFixed2 | formatNum}}</div>
				<div class="dy-fx-2">{{item.lateFeeTPay | toFixed2 | formatNum}}</div>
				<div class="dy-fx-2">{{item.payWay | billPayWay}}</div>
				<div class="dy-fx-2">{{item.operatorName ? item.operatorName.substr(0,4)+'...' : '--'}}</div>
				<div class="dy-fx-2">
					<span v-if="item.wstate === 'FFP'">已分配</span>
					<span v-else>未分配</span>
				</div>
				<div class="dy-fx-2">
					<span v-if="!item.memo">--</span>
					<a href="javascript:;" @click="getMemo(item.memo, true)" v-else>查看</a>
				</div>
				<div class="dy-fx-2">
					<span v-if="!item.vouchers">--</span>
					<a href="javascript:;" @click="getBigPic(item.vouchers)" v-else>查看</a>
				</div>
				<div class="dy-fx-2">
					<span v-if="item.wstate === 'FFP'">--</span>
					<span v-else>
						<a href="javascript:;" v-show="billData.contractAlterFlag == 'N'" v-if="permissions.indexOf('c51') > -1 || permissions.indexOf('c67') > -1" @click="getFPData(index, item.id, true)">分配账单</a>
					</span>
				</div>
			</div>
		</div>
		<div class="batch-btn mt-10" data-control="c51,c67" v-if="plFp > 1 && billData.contractAlterFlag == 'N'">
			<span @click="allFp()">批量分配</span>
		</div>
	</div>

	<div class="mt-15" v-if="billData.carryOverInfos.length">
		<h3 class="font-16 color-999">结转记录</h3>
		<div class="box-i-shadow br-4 border text-center">
			<div class="dy-flex line-height-40">
				<div class="dy-fx-2 border-r">关联账单</div>
				<div class="dy-fx-2 border-r">结转时间</div>
				<div class="dy-fx-2 border-r">结转费项</div>
				<div class="dy-fx-2 border-r">转入金额</div>
				<div class="dy-fx-2 border-r">转出金额</div>
				<div class="dy-fx-4 border-r">备注</div>
			</div>
			<div class="dy-flex line-height-40 border-t" v-for="item in billData.carryOverInfos">
				<div class="dy-fx-2 border-r"><a target="_blank" :href="'#/billDetail?id='+item.billId+'&aid='+item.contractId+'&ddtab=true'">{{item.billNo}}</a></div>
				<div class="dy-fx-2 border-r">{{item.carryOverDate | timestamp}}</div>
				<div class="dy-fx-2 border-r">{{item.expenseName}}</div>
				<div class="dy-fx-2 border-r">{{item.carryOverAmountInto | formatNum}}</div>
				<div class="dy-fx-2 border-r">{{item.carryOverAmountOut | formatNum}}</div>
				<div class="dy-fx-4 border-r">{{item.memo || '--'}}</div>
			</div>
		</div>
	</div>
	<!-- 结算明细 -->
	<div class="account-mx border-t">
		<div class="clearfix mb-10">
			<h3 class="font-16 pull-left color-999">结算明细 <span style="font-weight: normal;color: #E98667;font-size: 12px;" v-if="contractData.compareRentAmtFlag == 'Y'">(租金与抽成取其高)</span></h3>
			<span v-if="permissions.indexOf('c47') > -1 || permissions.indexOf('c66') > -1">
				<hl-button size="mini" class="pull-right" v-if="editFlag && (billData.billState == 'WTJ' || billData.billState == 'BRJ') && billData.paymentState !== 'APE' && billData.contractAlterFlag == 'N'" @on-click="editSave(false)">编辑</hl-button>
				<hl-button size="mini" class="pull-right" v-if="!editFlag && (billData.billState == 'WTJ' || billData.billState == 'BRJ') && billData.paymentState !== 'APE'"  @on-click="editSave(true)">保存</hl-button>
			</span>
		</div>
		<div class="account-wrap border-r br-4 box-i-shadow overflow">
			<div class="list-head dy-flex">
				<div class="dy-fx-2">费项</div>
				<div class="dy-fx-1">状态</div>
				<div class="dy-fx-3">历史结算(元)</div>
				<div class="dy-fx-2">减免金额(元)</div>
				<div class="dy-fx-2">历史结转(元)</div>
				<div class="dy-fx-2">本次应收(元)</div>
			</div>
			<div :class="{isStyleCommis: item.styleFlag}" v-for="(item, index) in billData.expenses" v-if="item.expenseType !== 'T'">
				<div class="list-head br-t-n dy-flex">
					<div class="dy-fx-2 dy-flex" style="justify-content: center;align-items: center;flex-direction: column">
						<span>{{item.name}}</span>
						<a style="font-size:12px;margin-top:-8px;height:20px" v-if="item.relevanceBillId && contractData.compareRentAmtFlag == 'Y'" @click="goTobill(item.relevanceBillId)">取高预收</a>
						<a style="font-size:12px" v-if="item.relevanceBillId && contractData.compareRentAmtFlag == 'Y'" @click="goTobill(item.relevanceBillId)">({{item.relevanceBillExpenseName +' '+ item.relevanceAmountReceived}})</a>
					</div>
					<div class="dy-fx-1 color-orange">{{item.paymentState | billState}}</div>
					<div class="dy-fx-3 fx-wrap">
						<div class="width-half border-r text-center color-999">应收本金</div>
						<div class="width-half text-center color-999">已收本金</div>
						<div class="width-half border-r border-t text-center">
							<span v-if="item.expenseType != 'CM'">{{item.amountReceived | toFixed2 | formatNum}}</span>
							<span v-if="item.expenseType == 'CM' && billData.commissionFlag == 'Y' && billData.commissonConfirmFlag == 'Y'">{{item.amountReceived | toFixed2 | formatNum}}</span>
							<span v-if="item.expenseType == 'CM' && billData.commissionFlag == 'Y' && billData.commissonConfirmFlag == 'N'"
							 class="color-orange">待确认</span>
							<a v-if="item.expenseType == 'CM' && billData.commissionFlag == 'Y' && billData.commissonConfirmFlag == 'N'"
							 @click="gotoCommisson" href="javascript:;" v-show="billData.valid == 'Y'">前往确认</a>
							<a v-if="item.expenseType == 'CM' && billData.commissionFlag == 'Y' && billData.commissonConfirmFlag == 'Y'"
							 @click="gotoCommisson" href="javascript:;">查看</a>
						</div>
						<div class="width-half border-t text-center">
							{{item.amountPayed | toFixed2 | formatNum}}
						</div>
						<div class="width-half border-r border-t text-center color-999" >应收滞纳金</div>
						<div class="width-half border-t text-center color-999" >已收滞纳金</div>
						<div class="width-half border-r border-t text-center">
							<span>{{item.lateFeeReceived | toFixed2 | formatNum}}</span>
						</div>
						<div class="width-half border-t text-center">
							{{item.lateFeePayed | toFixed2 | formatNum}}
						</div>
						<div class="width-half border-r border-t text-center color-999" >应退本金</div>
						<div class="width-half border-t text-center color-999" >已退本金</div>
						<div class="width-half border-r border-t text-center">{{item.refundReceived | toFixed2 | formatNum}}</div>
						<div class="width-half border-t text-center">{{item.refundPayed | toFixed2 | formatNum}}</div>
					</div>
					<div class="dy-fx-2 fx-wrap text-center">
						<div class="width-max color-999" >减免本金</div>
						<div class="width-max border-t">
							<span v-if="editFlag" :class="{'color-bill-active': item.derateExpenseUpdateFlag == 'Y'}">{{item.amountDerate | toFixed2 | formatNum}}</span>
							<span v-if="!editFlag && item.paymentState === 'APE'" :class="{'color-bill-active': item.derateExpenseUpdateFlag == 'Y'}">{{item.amountDerate | toFixed2 | formatNum}}</span>
							<input type="text" class="form-control text-center" :class="{'color-bill-active': item.derateExpenseUpdateFlag == 'Y'}" v-if="item.paymentState !== 'APE' && !editFlag" v-model="item.amountDerate"
							 @blur="computedJmBJ(item.amountDerate, item.amountReceived, item.amountPayed, index, item.carryOverTotalAmount)" @input="changeBill(index, 'derate_expense_update_flag')">
						</div>
						<div class="width-max color-999 border-t" >减免滞纳金</div>
						<div class="width-max border-t">
							<span v-if="editFlag" :class="{'color-bill-active': item.derateLateFeeUpdateFlag == 'Y'}">{{item.lateFeeDerate | toFixed2 | formatNum}}</span>
							<span v-if="item.paymentState === 'APE' && !editFlag" :class="{'color-bill-active': item.derateLateFeeUpdateFlag == 'Y'}">{{item.lateFeeDerate | toFixed2 | formatNum}}</span>
							<input type="number" class="form-control text-center" :class="{'color-bill-active': item.derateLateFeeUpdateFlag == 'Y'}" v-if="item.paymentState !== 'APE' && !editFlag" v-model="item.lateFeeDerate"
							 @change="computedZNJ(item.lateFeeDerate,index,'lateFeeDerate')" @input="changeBill(index, 'derate_late_fee_update_flag')">
						</div>
						<div class="width-max color-999 border-t" ><span style="height: 40px; background: rgb(244, 244, 244); display: block;"></span></div>
						<div class="width-max border-t">
							<span style="height: 40px; background: rgb(244, 244, 244); display: block;"></span>
						</div>
					</div>
					<div class="dy-fx-2 fx-wrap text-center">
						<div class="width-max color-999">抵扣本金</div>
						<div class="width-max border-t">
							<span>{{item.carryOverTotalAmount | toFixed2 | formatNum}}</span>
						</div>
						<div class="width-max color-999 border-t">
							<span style="height:40px;background:rgba(244,244,244,1);display:block;"></span>
						</div>
						<div class="width-max border-t">
							<span style="height:40px;background:rgba(244,244,244,1);display:block;"></span>
						</div>
						<div class="width-max color-999">结转抵扣</div>
						<div class="width-max border-t">
							<span>{{item.refundCarryover | toFixed2 | formatNum}}</span>
						</div>
					</div>
					<div class="dy-fx-2 fx-wrap text-center">
						<div class="width-max color-999">本金</div>
						<div class="width-max border-t">
							{{(item.amountReceived - item.amountPayed - item.amountDerate - item.carryOverTotalAmount ) | toFixed2 | formatNum}}
						</div>
						<div class="width-max color-999 border-t">滞纳金</div>
						<div class="width-max border-t">
							<input type="number" class="form-control text-center" :class="{'color-bill-active': item.lateFeeTPayUpdateFlag == 'Y'}" v-if="item.paymentState !== 'APE' && !editFlag" v-model="item.lateFeeTPay"
							 @change="computedZNJ(item.lateFeeTPay,index,'lateFeeTPay')" @input="changeBill(index, 'lateFeeTPayUpdateFlag')">
							<span v-if="!editFlag && item.paymentState === 'APE'" :class="{'color-bill-active': item.lateFeeTPayUpdateFlag == 'Y'}" >{{item.lateFeeTPay | toFixed2 | formatNum}}</span>
							<span v-if="editFlag" :class="{'color-bill-active': item.lateFeeTPayUpdateFlag == 'Y'}">{{item.lateFeeTPay | toFixed2 | formatNum}}</span>
						</div>
						<div class="width-max color-999 border-t">本次应退</div>
						<div class="width-max border-t">{{item.refundTPay | toFixed2 | formatNum}}</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="mt-15" v-if="billData.invoiceInfos.length">
		<h3 class="font-16 color-999">发票记录</h3>
		<div class="box-i-shadow br-4 border text-center">
			<div class="dy-flex line-height-40">
				<div class="dy-fx-2 border-r">发票号码</div>
				<div class="dy-fx-2 border-r">发票代码</div>
				<div class="dy-fx-2 border-r">发票类型</div>
				<div class="dy-fx-2 border-r">开票时间</div>
				<div class="dy-fx-2 border-r">开票金额</div>
				<div class="dy-fx-2 border-r">不含税金额</div>
				<div class="dy-fx-1">税额</div>
			</div>
			<div class="dy-flex line-height-40 border-t" v-for="item in billData.invoiceInfos">
				<div class="dy-fx-2 border-r">{{item.invoiceNo}}</div>
				<div class="dy-fx-2 border-r">{{item.invoiceCode}}</div>
				<div class="dy-fx-2 border-r">{{item.invoiceTypeVal}}</div>
				<div class="dy-fx-2 border-r">{{item.invoiceOutTime | timestamp}}</div>
				<div class="dy-fx-2 border-r">{{item.invoiceOutAmount | formatNum}}</div>
				<div class="dy-fx-2 border-r">{{item.taxFree | formatNum}}</div>
				<div class="dy-fx-1">{{item.taxAmount | formatNum}}</div>
			</div>
		</div>
	</div>

	<!-- 临时费项 -->
	<div class="bill-t-item temporary box-i-shadow br-4 mt-15 border" v-if="temporarys > 0 || costItem.length">
		<div class="dy-flex">
			<div class="dy-fx-3 border-r">费项</div>
			<div class="dy-fx-3 border-r">结转抵扣(元)</div>
			<div class="dy-fx-3 border-r">费项本金(元)</div>
			<div class="dy-fx-3 border-r">备注</div>
			<div class="dy-fx-1 border-r">状态</div>
			<div class="dy-fx-2">操作</div>
		</div>
		<div class="dy-flex border-t" v-for="(item, index) in billData.expenses" v-if="item.expenseType === 'T'">
			<div class="dy-fx-3 border-r">
				<b class="sh-1" :class="{'color-bill-active': item.nameUpdateFlag == 'Y'}">{{item.name}}</b>
				<input type="text" class="form-control text-center hide sh-2 max-assIn" :class="{'color-bill-active': item.nameUpdateFlag == 'Y'}" v-model="item.name" @input="changeBill(index, 'expense_name_update_flag')">
			</div>
			<div class="dy-fx-3 border-r">
				{{item.carryOverTotalAmount | toFixed2 | formatNum}}
			</div>
			<div class="dy-fx-3 border-r">
				<b class="sh-1" :class="{'color-bill-active': item.amountReceiveUpdateFlag == 'Y'}">{{item.amountReceived | toFixed2 | formatNum}}</b>
				<input type="text" class="form-control text-center hide sh-2 max-assIn" :class="{'color-bill-active': item.amountReceiveUpdateFlag == 'Y'}" v-model="item.amountTPay" @input="changeBill(index, 'expense_amount_update_flag')">
			</div>
			<div class="dy-fx-3 border-r ellipsis-1" :title="item.memo">
				<b class="sh-1" :class="{'color-bill-active': item.memoUpdateFlag == 'Y'}">{{item.memo || '--'}}</b>
				<input type="text" class="form-control text-center hide sh-2 max-assIn" :class="{'color-bill-active': item.memoUpdateFlag == 'Y'}" v-model="item.memo" @input="changeBill(index, 'expense_memo_update_flag')">
			</div>
			<div class="dy-fx-1 border-r color-orange">
				{{item.paymentState | billState}}
			</div>
			<div class="dy-fx-2">
				<span v-if="billData.billState === 'WTJ' || billData.billState === 'BRJ'">
					<button type="button" class="icon-Gm-edit js-amend" @click="editCostItem($event)"></button>
					<button type="button" class="icon-Gm-cancel js-cancel-btn hide" data-control="c49" @click="delIdCostItem(item.id)"></button>
					<button type="button" class="icon-Gm-confirm js-confirm-btn hide" @click="editIdCostItem(item.id, item.name, item.memo, item.amountTPay, item)"></button>
				</span>
				<span v-else >--</span>
			</div>
		</div>
		<div class="dy-flex border-t" v-for="(item, index) in costItem">
			<div class="dy-fx-3 border-r">
				<input type="text" class="form-control text-center max-assIn" v-model="item.name">
			</div>
			<div class="dy-fx-3 border-r">
				--
			</div>
			<div class="dy-fx-3 border-r">
				<input type="text" class="form-control text-center max-assIn" v-model="item.amountTPay" @blur="costItemNum(item.amountTPay, index)">
			</div>
			<div class="dy-fx-3 border-r ellipsis-1">
				<input type="text" class="form-control text-center max-assIn" v-model="item.memo">
			</div>
			<div class="dy-fx-1 border-r color-orange">
				{{item.paymentState | billState}}
			</div>
			<div class="dy-fx-2">
				<button type="button" class="icon-Gm-cancel js-cancel-btn" data-control="c49" @click="delCostItem(index)"></button>
				<button type="button" class="icon-Gm-confirm js-confirm-btn" @click="submitCostItem(index)"></button>
			</div>
		</div>
	</div>

	<div class="mt-15" v-if="billData.contractAlterFlag == 'N'">
		<button type="button" class="icon-Org-account js-add-water" data-control="c48" @click="addItemCost" v-if="(billData.billState == 'WTJ' || billData.billState == 'BRJ') && billData.paymentState !== 'APE'">新增临时费项</button>
	</div>



	<!-- 费用结算 -->
	<div class="mt-15 pt-15">
		<h4 class="font-16 font-wt color-999 mb-10">费用结算</h4>
		<div class="table js-table box-i-shadow pt-10 pb-10 br-4 overflow">
			<div class="table-cell col-md-4 border-r">
				<div class="clearfix bill-line-height">
					<div class="pull-left color-999">应收本金：</div>
					<div class="pull-right"><b class="ysbj">{{totalYS | toFixed2 | formatNum}}</b>元</div>
				</div>
				<div class="clearfix bill-line-height">
					<div class="pull-left color-999">已收本金：</div>
					<div class="pull-right"><b class="isbj">{{totalIS | absNum | toFixed2 | formatNum}}</b>元</div>
				</div>
				<div class="clearfix bill-line-height">
					<div class="pull-left color-999">减免本金：</div>
					<div class="pull-right"><b class="jmbj">{{totalJM | toFixed2 | formatNum}}</b>元</div>
				</div>
				<div class="clearfix bill-line-height">
					<div class="pull-left color-999">结转抵扣：</div>
					<div class="pull-right"><b class="zzzzz">{{carryOverTotalAmount | toFixed2 | formatNum}}</b>元</div>
				</div>
				<div class="clearfix bill-line-height">
					<div class="pull-left color-999">本次应收本金：</div>
					<div class="pull-right"><span class="color-orange zhbj">{{totalBCYS | absNum | toFixed2 | formatNum}}</span>元</div>
				</div>
			</div>
			<div class="table-cell col-md-4 border-r" style="vertical-align: top;">
				<div class="clearfix bill-line-height">
					<div class="pull-left color-999">应收滞纳金：</div>
					<div class="pull-right"><b class="ysznj">{{totalYSznj | toFixed2 | formatNum}}</b>元</div>
				</div>
				<div class="clearfix bill-line-height">
					<div class="pull-left color-999">已收滞纳金：</div>
					<div class="pull-right"><b class="isznj">{{totalISznj | toFixed2 | formatNum}}</b>元</div>
				</div>
				<div class="clearfix bill-line-height">
					<div class="pull-left color-999">减免滞纳金：</div>
					<div class="pull-right"><b class="jmznj">{{totalJMznj | toFixed2 | formatNum}}</b>元</div>
				</div>
				<div class="clearfix bill-line-height">
					<div class="pull-left color-999">本次应收滞纳金：</div>
					<div class="pull-right"><span class="color-orange zhznj">{{totalBCYSznj | toFixed2 | formatNum}}</span>元</div>
				</div>
			</div>
			<div class="table-cell col-md-4 border-r" style="vertical-align: top;">
				<div class="clearfix bill-line-height">
					<div class="pull-left color-999">应退本金：</div>
					<div class="pull-right"><b class="ytbj">{{totalYT | toFixed2 | formatNum}}</b>元</div>
				</div>
				<div class="clearfix bill-line-height">
					<div class="pull-left color-999">已退本金：</div>
					<div class="pull-right"><b class="itbj">{{totalIT | toFixed2 | formatNum}}</b>元</div>
				</div>
				<div class="clearfix bill-line-height">
					<div class="pull-left color-999">结转抵扣：</div>
					<div class="pull-right"><b class="itbj">{{carryOverTotalAmountYt | toFixed2 | formatNum}}</b>元</div>
				</div>
				<div class="clearfix bill-line-height">
					<div class="pull-left color-999">本次应退：</div>
					<div class="pull-right"><b class="bcyt color-orange">{{totalBCYT | toFixed2 | formatNum}}</b>元</div>
				</div>
			</div>
			<div class="table-cell col-md-4 text-center">
				<div>本次应收合计(元)</div>
				<div class="js-color-green combined">{{totalYSHJ | absNum | toFixed2 | formatNum}}<span v-if="totalYSHJ > 0">(应收)</span><span
					 v-if="totalYSHJ < 0">(应退)</span></div>
			</div>
		</div>
	</div>

	<!-- 操作记录 -->
	<div class="operaTionArea" :class="{'CZOpenArea':!CZOpenFlag}" v-if="logData.length">
		<ul class="OTA_title">
			<li>操作记录</li>
			<li @click="CZOpenFlag = !CZOpenFlag">
				<span v-if="!CZOpenFlag">展开详情</span>
				<span v-if="CZOpenFlag">收起详情</span>
				<img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!CZOpenFlag">
				<img class="bill-open-image" src="assets/images/down.png" alt="" v-if="CZOpenFlag">
			</li>
		</ul>
		<div v-for="(item,index) in logData">
			<ul class="OTA_person">
				<li>操作人：{{item.logUser}}</li>
				<li>{{item.logTime}}</li>
			</ul>
			<div class="OTA_typeBox">
				<div>{{item.operationName}}</div>
				<div class="OTA_type">
					<ul v-for="(item2,index2) in item.logRecords">
						<li v-if="item2.list" v-for="(item3,index3) in item2.list">
							<span v-for="item4 in item3">
								<span v-if="item4.logType == 'text'"><span>{{item4.content}} <span>--</span> </span>
								</span>
								<span v-if="item4.logType == 'change'"><span style="margin-right:20px">{{item4.key}}</span><span>原值</span><span
									 style="margin-right:20px;color: #565E99">“{{item4.before}}”</span><span>修改值</span><span style="color: #565E99">“{{item4.after}}”</span></span>
								<span v-if="item4.logType == 'value'"><span>{{item4.key}}</span><span>“{{item4.content}}”</span></span>
							</span>
						</li>
						<li v-if="!item2.list">
							<span v-for="(item3,index3) in item2.rowData">
								<span v-if="item3.logType == 'text'" :class="'bill_'+item3.logType"><span>{{item3.content}}</span></span>
								<span v-if="item3.logType == 'change'" :class="'bill_'+item3.logType"><span>{{item3.key}}</span><span>原值</span><span
									 style="margin-right:20px">“{{item3.before}}”</span><span>修改值</span><span>“{{item3.after}}”</span></span>
								<span v-if="item3.logType == 'value'" :class="'bill_'+item3.logType"><span>{{item3.key}}</span><span>“{{item3.content}}”</span></span>
							</span>
						</li>
					</ul>
				</div>

			</div>
		</div>
	</div>


	<div class="mt-15 mb-10">
		<hl-button type="primary" v-show="billData.contractAlterFlag == 'N'"  v-if=" ( (billData.billState == 'WTJ' || billData.billState == 'BRJ') && billData.valid == 'Y' && permissions.indexOf('c50') > -1 ) ||  ( (billData.billState == 'WTJ' || billData.billState == 'BRJ') && billData.valid == 'Y' && permissions.indexOf('c70') > -1 )"  @on-click="submitBill">提交账单</hl-button>
		<hl-button type="primary" v-if=" billData.billState == 'WSK' && billData.valid == 'Y' && billData.contractAlterFlag == 'N'"  @on-click="paymant">账单催缴</hl-button>
		<hl-button type="primary" v-if="billData.billTypeCode != 'YX' && billData.billTypeCode != 'YXTK'" style="width: 150px;" size="large" @on-click="print">账单通知预览／打印</hl-button>
		<hl-button type="primary" size="large" v-show="billData.billTypeCode != 'YX' && billData.billTypeCode != 'YXTK'" v-if=" !printflag "  @on-click="print">催缴单预览／打印</hl-button>
		<hl-button type="outline" v-if="  billData.valid == 'Y' && permissions.indexOf('c125') > -1 && billData.contractAlterFlag == 'N'"  @on-click="resetInit">账单撤回</hl-button>

		<div class="inline ml-5 relative init-hover" v-show="billData.valid == 'Y' && billData.contractAlterFlag == 'N'">
			<span class="icon-Gm-explain cursor color-999"></span>
			<div class="init-tips">账单撤回－将当前账单恢复至初始状态。</div>
		</div>
	</div>
	<!-- 分配账单 -->
	<div class="pop box-o-shadow" v-if="fpFlag">
		<div class="head-pop font-16">
			<span class="">分配账单</span>
			<button class="fw-close absolute js-explain-close" @click="closeFP">×</button>
		</div>
		<div class="pl-24 pr-24 content-pop">
			<div class="clearfix">
				<div class="pull-left">费项列表</div>
				<div class="pull-right">可分配金额：
					<span class="color-orange">{{fPIS | toFixed2}}</span>元
				</div>
			</div>
			<div class="br-4 box-i-shadow-2 overflow mt-10">
				<div class="dy-flex tykg color-gray">
					<div class="dy-fx-2">费项</div>
					<div class="dy-fx-2">本次应收本金(元)</div>
					<div class="dy-fx-2">本次实收本金(元)</div>
					<div class="dy-fx-2">本次应收滞纳金(元)</div>
					<div class="dy-fx-2">本次实收滞纳金(元)</div>
				</div>
				<div class="dy-flex tykg" v-for="(item, index) in fPData" v-if="item.expenseType !== 'T' && !item.styleFlag">
					<div class="dy-fx-2">{{item.name}}</div>
					<div class="dy-fx-2">{{item.amountTPay}}</div>
					<div class="dy-fx-2 account-mx1">
						<span v-if="item.amountTPay === 0">--</span>
						<input v-else type="text" class="form-control text-center" v-model="fpPut[index].a" @blur="ifLing(fpPut[index].a, index, 'a', item.amountTPay, item.id)">
					</div>
					<div class="dy-fx-2">{{item.lateFeeTPay}}</div>
					<div class="dy-fx-2 account-mx1">
						<span v-if="item.lateFeeTPay === 0">--</span>
						<input v-else type="text" class="form-control text-center" v-model="fpPut[index].b" @blur="ifLing(fpPut[index].b, index, 'b', item.lateFeeTPay, item.id)">
					</div>
				</div>
			</div>

			<div class="mt-15 box-i-shadow allocation-o br-4 overflow" v-if="fPDataNum > 0">
				<div class="dy-flex tykg">
					<div class="dy-fx-1 border-r">临时费项</div>
					<div class="dy-fx-1 border-r">本次实收金额(元)</div>
					<div class="dy-fx-1 border-r">分配</div>
				</div>
				<div class="dy-flex tykg" v-for="(item, index) in fPData" v-if="item.expenseType === 'T'">
					<div class="dy-fx-1 border-r">{{item.name}}</div>
					<div class="dy-fx-1 border-r je">{{item.amountTPay}}</div>
					<div class="dy-fx-1 border-r"><span class="js-select-checkbox" v-if="item.paymentState != 'APE'" @click="costItemFp(item.amountTPay, index, $event, item.id)"></span><span
						 v-if="item.paymentState == 'APE'">--</span></div>
				</div>
			</div>
		</div>
		<div class="back-contract text-center ptb-10 js-back-content">
			<button class="n-btn-outline br-4 js-confirm-close" @click="submitFp">确认分配</button>
		</div>
	</div>
	<!-- 提交账单 -->
	<div class="pop box-o-shadow" v-if="closeFlag" style="width:600px;">
		<div class="head-pop font-16">
			<span class="">提交账单</span>
			<button class="fw-close absolute js-explain-close" @click="closeFP">×</button>
		</div>
		<div class="pl-24 pr-24 content-pop content-24">
			<div class="ml-24 dy-flex" style="line-height:32px;">
				<div class="dy-fx-1">正在提交：</div>
				<div class="dy-fx-3">
					{{contractData.zlfCompany}} {{billData.beginDate | timestamp}} 至 {{billData.endDate | timestamp}} 账单
				</div>
			</div>
			<div class="ml-24 dy-flex" style="line-height:32px;">
				<div class="dy-fx-1">付款截止日期：</div>
				<div class="dy-fx-3">
					{{billData.deadlineDate | timestamp}}
				</div>
			</div>
			<div class="ml-24 dy-flex" style="line-height:32px;">
				<div class="dy-fx-1">本次应收本金：</div>
				<div class="dy-fx-3">
					{{totalBCYS | toFixed2 | formatNum}}
				</div>
			</div>
			<div class="ml-24 dy-flex" style="line-height:32px;">
				<div class="dy-fx-1">本次应收滞纳金：</div>
				<div class="dy-fx-3">
					{{totalBCYSznj | toFixed2 | formatNum}}
				</div>
			</div>
			<div class="ml-24 dy-flex" style="line-height:32px;">
				<div class="dy-fx-1">本次应退：</div>
				<div class="dy-fx-3">
					{{totalBCYT > 0 ? '-' : ''}}{{totalBCYT | toFixed2 | formatNum}}
				</div>
			</div>
			<div class="ml-24 dy-flex" style="line-height:32px;">
				<div class="dy-fx-1">本次应收合计：</div>
				<div class="dy-fx-3">
					{{totalYSHJ | toFixed2 | formatNum}}
				</div>
			</div>
		</div>
		<div class="back-contract text-center ptb-10 js-back-content">
			<hl-button type="primary" @on-click="submitQs">确认提交</hl-button>
			<hl-button type="outline" @on-click="closeFlag = !closeFlag">返回修改</hl-button>
		</div>
	</div>



	<div class="backdrop" v-if="closeFlag"></div>
	<div class="backdrop" v-if="fpFlag"></div>


	<div class="bill-memo-wrap" v-if="memo.flag">
		<div class="bill-memo">
			<div class="bill-title">说明</div>
			<button class="bill-close" @click="getMemo('', false)">×</button>
			<div class="bill-memo-content">{{memo.content}}</div>
		</div>
	</div>

	<div v-if="IsCompareRentAmtFlag" class="bill-pop dy-flex z-999" style="width: 100%;height: 100%;position: fixed;left: 0;top: 0;background-color: rgba(0,0,0,.5);justify-content: center;align-items: center;">
		<div style="width: 400px;background: #fff;" class="br-4 relative overflow">
			<div @click="IsCompareRentAmtFlag = !IsCompareRentAmtFlag" class="absolute icon-Gm-close font-16 close text-center line-height-45"
			 style="right: 0;top: 0;width: 45px;height: 45px;"></div>
			<h3 class="font-18 text-center" style="color:#565E99; padding-top: 30px;">提交失败</h3>
			<p class="font-14 text-center ptb-20">此账单包含营业额抽成，营业额抽成应收金额待确认</p>
			<div class="dy-flex line-height-45 text-center">
				<div class="dy-fx-1 cursor" style="background-color: #565E99; color:#fff;" @click="gotoCommisson">前往确认</div>
				<div class="dy-fx-1 cursor" style="background-color: #f9f9f9;" @click="IsCompareRentAmtFlag = !IsCompareRentAmtFlag">取消</div>
			</div>
		</div>
	</div>
</section>

<script src="modules/contract/scripts/contract_public.js" type="text/javascript" charset="utf-8"></script>
<script src="modules/bill/scripts/bill_detail.js" type="text/javascript" charset="utf-8"></script>

<style media="screen">

	.color-bill-active {
		font-weight: bold;
		color: #5e67a5;
	}

	.change-abs {
		display: block;
		width:46px;
		height:20px;
		background:#EA733D;
		border-radius:12px 2px 12px 2px;
		line-height: 20px;
		color: #fff;
		font-size: 12px;
		text-align: center;
		margin-left: 20px;
	}

	.isStyleCommis {
		background: #f1f1f1;
	}

	.bill-due-to {
		display: flex;
		align-items: center;
	}

	.icon-GM-bill {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background: #EA733D;
		margin-right: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}

	.init-hover:hover .init-tips {
		display: block;
	}

	.init-tips {
		display: none;
		width: 240px;
		position: absolute;
		left: 50%;
		top: 28px;
		background: #fff;
		filter: drop-shadow(0 0 5px rgba(0, 0, 0, .2));
		transform: translate(-50%, 0);
		padding: 10px;
		border-radius: 4px;
	}

	.init-tips:before {
		content: '';
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0);
		top: -16px;
		width: 0;
		height: 0;
		border-width: 8px;
		border-style: solid;
		border-color: transparent transparent #fff transparent;
	}

	.operaTionArea {
		margin-top: 20px;
		font-size: 14px;
		color: #666;
		border-bottom: 1px solid #F2F2F2
	}

	.CZOpenArea {
		height: 27px;
		overflow: hidden;
	}

	.OTA_title,
	.OTA_person {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.OTA_typeBox {
		display: flex;
		margin-bottom: 10px;
	}

	.OTA_type {
		flex-wrap: wrap;
	}

	.OTA_type>ul>li {
		margin-bottom: 10px;
	}

	.OTA_typeBox>div:nth-child(1) {
		min-width: 105px;
		margin-right: 40px;
	}

	.OTA_typeBox>div:nth-child(1)::before {
		display: inline-block;
		content: '';
		width: 6px;
		height: 6px;
		background: rgba(216, 216, 216, 1);
		border-radius: 50%;
		margin-right: 10px;
	}

	.OTA_person {
		color: #999;
	}

	.OTA_title>li:nth-child(1) {
		color: #929BA8
	}

	.OTA_title>li:nth-child(2) {
		cursor: pointer;
		color: #337AB7
	}

	.OTA_mask {
		display: inline-block;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: #D8D8D8
	}

	.bill_text {
		margin-right: 20px;
	}

	.bill_value {
		margin-right: 20px;
	}

	.bill_change {
		margin-right: 20px;
	}

	.bill_change>span:nth-child(1) {
		margin-right: 20px;
	}

	.OTA_type>ul:nth-child(1)>.bill_text:nth-child(1) {
		margin-right: 0
	}

	.OTA_span {
		color: #565E99;
		margin-right: 20px;
	}

	.bill_value span:nth-child(2),
	.bill_change span:nth-child(3),
	.bill_change span:nth-child(5) {
		color: #565E99
	}
</style>
